<template>

    <echart :options="option" class="echarts"> </echart>
    
</template>

<style scoped>
.echarts {
  border-radius: 4px;

  height: 100%;
  width: 100%;
}
</style>

<script>
var data = [
  {
    value: 3661,
    name: "设备"
  },
  {
    value: 5713,
    name: "系统"
  },
  {
    value: 9938,
    name: "应用"
  },
  {
    value: 17623,
    name: "数据库"
  },
  {
    value: 3299,
    name: "网络"
  }
];

export default {
  mounted() {},
  data: function() {
    return {
      option: {
        backgroundColor: "#0D2A42",
        title: {
          text: "事件分类                                          ",
          x: "4%",
          y: "2%",
          backgroundColor:"#0A3C60",
          textStyle: {
            fontWeight: "normal",
            fontSize: 20,
            color: "#fff"
          }
        },
        //鼠标悬停的显示效果
        tooltip: {
          show: true,
          trigger: "item",
          formatter: "{b}: {c} ({d}%)"
        },
        //图例
        legend: {
          orient: "horizontal", //vertical 竖排
          left: "12%",
          bottom: "8%",
          textStyle: {
            fontWeight: "normal",
            fontSize: 16,
            color: "#fff"
          },
          data: ["设备", "系统", "应用", "数据库", "网络"]
        },
        series: [
          {
            type: "pie",
            selectedMode: "single",
            center: ["44%", "50%"], //外边距 设置图左右 上下的位置
            radius: ["50%", "60%"],
            color: ["#AF89D6", "#5ab6df", "#6a8bc0", "#4acacb", "#fe8676"],

            label: {
              normal: {
                // position: 'inner',
                formatter: "{b}\n{d}%",

                textStyle: {
                  color: "#fff",
                  fontWeight: "bold",
                  fontSize: 12
                }
              }
            },
            data: data
          }
        ]
      }
    };
  }
};
</script>